<template>
<div class="view">
    <swiper :options="swiperOption" ref="mySwiper" class="swiper">
        <!-- slides -->
        <swiper-slide v-for="(item,i) in imgArray
        " :key="i">
            <img :src="item.img1" alt="">
        </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
            <div class="swiper-button-prev" slot="button-prev"></div>
            <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</div>
</template>

<script>
import {
    swiper,
    swiperSlide
} from 'vue-awesome-swiper'
import homeService from '@/network/service/homeService.js';
export default {
    components: {
        swiper,
        swiperSlide
    },
    data() {
        return { //图片路径
            imgArray: [
                {img1:require('@/assets/banner1.png')},
            ],
            swiperOption: {
                notNextTick: true,
                loop: false, //无缝轮播
                centeredSlides: true,
                autoplay: { //自动轮播
                    delay: 3000,
                    disableOnInteraction: false,
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

            }
        }
    },
    mounted() {
        // 然后你就可以使用当前上下文内的swiper对象去做你想做的事了
        // console.log('this is current swiper instance object', this.swiper);
        // this.swiper.slideTo(3, 1000, false)
        // console.log('mounted'); 

        //鼠标覆盖停止自动切换
        this.swiper.el.onmouseover = function () {
            this.swiper.autoplay.stop();
            // console.log('stop');
        }
        //鼠标离开开始自动切换
        this.swiper.el.onmouseout = function () {
                this.swiper.autoplay.start();
                // console.log('start');
            },
            
    // 广告信息
    this.getAdList()
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper
        },

    },
    methods: {
        getAdList() {
            let params = {
                startTime: '',
                endTime: '',
                page: 0,
                pagesize: 20
            }
            homeService.getAdList(params).then(res => {
                    let result = res.data;
                    let code = result.rescode;
                    let resmsg = result.msg;
                    if (code == 100) {
                        // console.log(result)
                    } else {
                        this.$Message.error(resmsg);
                    }
                },
                error => {
                    this.$Message.error('服务器异常，请稍后再试')
                }
            )
        }
    },
}
</script>

<style lang="less">
.view {
    width: 100%;
    height: 100%;

    &:hover .swiper-button-next,
    &:hover .swiper-button-prev {
        display: block;
    }

    cursor: pointer;

    .swiper {
        width: 100%;
        height: 100%;

        swiper-slide {
            width: 100%;
            height: 100%;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }
}

.swiper-pagination-bullet-active {
    background-color: #fff !important;
}

.swiper-pagination-bullet {
    border: 1px solid #fff;
}

.swiper-button-prev {
    margin-left: 40px;
    display: none;
}

.swiper-button-next {
    margin-right: 40px;
    display: none;
}
</style>
